<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :title="`${$t('modify')}`"
    width="60%">
    <el-row :gutter="40">
      <el-col :span="10">
        <el-card shadow="never" style="padding: 5px">
          <div class="color-choose">
            <h3>选择颜色</h3>
            <el-color-picker v-model="searchForm.standardColor" :predefine="predefineColors"/>
          </div>
        </el-card>
      </el-col>
      <el-col :span="14">
        <el-card shadow="never" style="padding: 5px">
          <div class="color-choose">
            <h3>合格区间</h3>
            <div>
              <el-input-number v-model="searchForm.minIndex" :min="0" step-strictly/>
              ~
              <el-input-number v-model="searchForm.maxIndex" :min="0" step-strictly/>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button icon="el-icon-circle-close" @click="handleClose">{{
        $t("cancel")
      }}</el-button>
      <el-button v-btnThrottle="doSave" type="primary" icon="el-icon-receiving">{{
        $t("save")
      }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { doAdd, doUpdate, getInfo } from '@/api/OEE/standardDeploy'
export default {
  name: 'StandardValueDialog',
  components: {},
  props: {},
  data() {
    return {
      dialogVisible: false,
      searchForm: {
        standardColor: '#409EFF',
        minIndex: 0,
        maxIndex: 0
      },
      predefineColors: [
        '#1890ff',
        '#13ce66',
        '#FFBA00',
        '#ff4949',
        '#00ced1',
        '#1e90ff',
        '#c71585',
        '#c7158577'
      ],
      searchTags: [
        { label: this.$t('timeType'), prop: 'timeType', tag: 'DynInput' },
        { label: this.$t('fixedTime'), prop: 'fixedTime', tag: 'DynCheckbox' },
        { label: this.$t('startTime'), prop: 'startTime', tag: 'Dyntimerange' },
        { label: this.$t('endTime'), prop: 'endTime', tag: 'Dyntimerange' },
        { label: this.$t('remark'), prop: 'remark', tag: 'DynTextarea', row: 2 }
      ]
    }
  },
  methods: {
    doSave() {
      if (this.searchForm.id) {
        doUpdate(this.$clearNull(this.searchForm)).then(res => {
          this.$betterTips(res, this.handleClose, this.handleUpdate)
        })
      } else {
        doAdd(this.$clearNull(this.searchForm)).then(res => {
          this.$betterTips(res, this.handleClose, this.handleUpdate)
        })
      }
    },
    // 触发父组件更新
    handleUpdate() {
      this.$emit('initList')
    },
    handleOpen(val) {
      if (val && val.id) {
        this.title = this.$t('modify')
        getInfo({ id: val.id }).then(res => {
          this.searchForm = res.data
        })
      } else {
        this.title = this.$t('add')
      }
      this.dialogVisible = true
    },
    handleClose() {
      Object.assign(this.$data, this.$options.data.call(this))
    }
  }
}
</script>
<style lang="scss" scoped>
.color-choose{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.color-titles{
  display: flex;
  justify-content: space-around;
}
.color-interval{
  .color-item{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 10px;
    .color-item-l{
        width: 200px;
        height: 30px;
    }
  }
}
</style>
